<template>
	<view>
		<view class="title-box">
			<view class="title-box-txt">
				介绍自己
			</view>
			<view class="title-box-tip">
				*请录个简单的视频介绍自己，证明自己的创作才能
			</view>
		</view>
		<view class="up-box">
			<image @click="choicevideo" v-show="!vioUrl" style="margin-top: 82rpx;" src="/static/image/mine/up.png" mode="">
			</image>
			<video v-show="vioUrl" :src="vioUrl" style="width:100%;height:100%"></video>
			<view v-show="!vioUrl" @click="choicevideo">立即上传你的介绍视频</view>
		</view>
		<view class="title-box" style="margin-top: 20rpx;">
			<view class="title-box-txt">
				认证类型
			</view>
			<view class="title-box-tip">
				*如果没有你要认证的类型，请选择实力创作者
			</view>
		</view>
		<view class="list-box">
			<view class="list-box-item" :class="currentOne == index ? 'active' : ''" v-for="(item,index) in list1"
				:key="index" @click="changeOne(index)">
				{{item}}
			</view>
		</view>
		<view class="title-box" style="margin-top: 30rpx;">
			<view class="title-box-txt">
				微信<span style="font-size: 24rpx;">（选填）</span>
			</view>
			<view class="title-box-tip">
				*与平台客服取得联系，随时沟通并获得更多福利
			</view>
		</view>
		<input class="title-input" type="text" v-model="wechattx" placeholder="请输入您的微信号" />
		<view class="title-box" style="margin-top: 30rpx;">
			<view class="title-box-txt">
				其他平台的认可截图 <span style="font-size: 24rpx;">（选填）</span>
			</view>
			<view class="title-box-tip">
				*请提供抖音、快手或微博等其他平台主页截图，以便我们更好了
				解您的创作才能，其他平台内容质量高更容易通过认证哦~
			</view>
		</view>
		<view class="up-imgs">
			<image @click="choiceImg" v-show="!headUrl" src="/static/image/find/upload.png" style="margin-top:50rpx;" mode="">
			</image>
			<image v-show="headUrl" style="width:100%;height:100%" :src="headUrl ? headUrl : ''" mode=""></image>
			<view @click="choiceImg" class="" v-show="!headUrl">
				上传图片
			</view>
		</view>
		<view class="submit-btn" @click="submits">
			提交认证
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentOne: 5,
				list1: ['文娱推荐', '音乐演出', '看荐电影', '书卷一梦', '樱桃琥珀', '实力创作者'],
				headUrl: '', //jietu
				vioUrl: '',
				wechattx: '',
			}
		},
		onLoad(options) {
			if (options) {
				this.title = options.title
				uni.setNavigationBarTitle({
					title: options.title
				});
			}

		},
		methods: {
			// 认证类型
			changeOne(e) {
				this.currentOne = e;
			},
			// 提交
			submits() {
				if (!this.vioUrl) return this.$helper.toast('none', '请上传视频')
				if (!this.headUrl) return this.$helper.toast('none', '请上传认可截图')
				let params = {
					auth_type: "star",
					video: this.vioUrl,
					wechat: this.wechattx,
					images: this.headUrl,
					type: this.list1[this.currentOne]
				}
				if (this.title == '星选达人认证') {
					params.auth_type = "star"
				}
				if (this.title == '兴趣达人认证') {
					params.auth_type = "interest"
				}
				this.$http.getActiveApproval(params).then(res => {
					console.log(res)
					if (res.code == '1') {

					} else if (res.msg == '请先进行实名认证') {
						uni.showModal({
							title: '提示',
							content: res.msg,
							confirmColor: "#000000",
							cancelColor: "#999999",
							success: (res) => {
								if (res.confirm) {
									this.$helper.to('/pages/views/realName/realName')
								}

							}
						})
					}
				})

				// 审核通过 审核失败
				// this.$helper.to('/pages/views/managementEdit/managementSuccess?title=' + '提交成功')
			},
			// 选择图片操作
			choicevideo(index) {
				uni.chooseVideo({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: ress => {
						console.log(ress)
						this.uploadUserVideo(ress.tempFilePath, index);
					}
				});
			},
			uploadUserVideo(blob, index) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: this.$http.baseUrl + '64803624da6de',
					filePath: blob,
					name: 'file',
					header: {
						Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						console.log(res)
						this.vioUrl = JSON.parse(res.data).data.url;

						uni.showToast({
							title: '上传成功',
							duration: 1000
						});
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 选择图片操作
			choiceImg(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: ress => {
						this.uploadUserImg(ress.tempFilePaths[0], index);
					}
				});
			},
			uploadUserImg(blob, index) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: this.$http.baseUrl + '64803624da6de',
					filePath: blob,
					name: 'file',
					header: {
						Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						this.headUrl = JSON.parse(res.data).data.url;

						uni.showToast({
							title: '上传成功',
							duration: 1000
						});
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.title-box {
		margin-bottom: 20rpx;

		.title-box-txt {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}

		.title-box-tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 10rpx;
			line-height: 44rpx;
		}
	}

	.up-box {
		width: 582rpx;
		height: 352rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin: 0 auto;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;

		image {
			width: 140rpx;
			height: 140rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;

		.list-box-item {
			width: 210rpx;
			height: 72rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			text-align: center;
			line-height: 72rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			margin: 20rpx 20rpx 0 0;
		}

		.active {
			background: #000000;
			color: #fff;
		}
	}

	.title-input {
		width: 690rpx;
		height: 90rpx;
		border-radius: 12rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #000;
		line-height: 90rpx;
		margin: 0 auto;
		background: #F8F8F8;
		padding-left: 12rpx;

	}

	.up-imgs {
		width: 219rpx;
		height: 219rpx;
		border-radius: 16rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 30rpx;

		image {
			width: 68rpx;
			height: 68rpx;
			margin: 0 auto;
			// margin-top: 50rpx;
			margin-bottom: 10rpx;
		}
	}

	.submit-btn {
		width: 690rpx;
		height: 90rpx;
		position: fixed;
		bottom: 50rpx;
		background-color: #000000;
		text-align: center;
		line-height: 90rpx;
		left: 50%;
		transform: translate(-50%);
		color: #FEC92F;
		border-radius: 50rpx;
	}
</style>